<template>
    <div>
        <div class="title-box">
            <div><span>*</span>选择门店</div>
            <el-button plain :disabled="props.pageType == 'look'" @click="showStoreBox">选择门店</el-button>
        </div>
        <div v-if="tableData.length">
            <el-table
                v-if="tableData.length"
                ref="multipleTableRef"
                :data="tableData"
                style="width: 100%"
                class="table-box"
                header-row-class-name="table_header_title">
                <!-- <el-table-column type="selection" width="55" /> -->
                <el-table-column label="编码">
                    <template #default="scope">
                        {{ scope.$index + 1 + (pageParam.page - 1) * pageParam.pageSize }}
                    </template>
                </el-table-column>
                <el-table-column label="名称">
                    <template #default="scope">
                        {{ scope.row.store_name ? scope.row.store_name : '--' }}
                    </template>
                </el-table-column>
                <el-table-column label="地址">
                    <template #default="scope">
                        {{ scope.row.store_address ? scope.row.store_address : '--' }}
                    </template>
                </el-table-column>
                <el-table-column label="行政区域">
                    <template #default="scope">
                        {{ scope.row.regional_area ? scope.row.regional_area : '--' }}
                    </template>
                </el-table-column>
                <el-table-column label="经纬度" width="150px">
                    <template #default="scope">
                        <div>经度{{ scope.row.lat }}</div>
                        <div>纬度{{ scope.row.lon }}</div>
                    </template>
                </el-table-column>
                <el-table-column label="门店员工">
                    <template #default="scope">
                        {{ scope.row.staff_num ? scope.row.staff_num : '0' }}
                    </template>
                </el-table-column>
                <el-table-column label="所属分组">
                    <template #default="scope">
                        {{ scope.row.group_name ? scope.row.group_name : '--' }}
                    </template>
                </el-table-column>
                <el-table-column label="创建人">
                    <template #default="scope">
                        {{ scope.row.created_name ? scope.row.created_name : '--' }}
                    </template>
                </el-table-column>
                <el-table-column label="创建时间" width="180">
                    <template #default="scope">
                        {{ scope.row.created_at ? scope.row.created_at : '--' }}
                    </template>
                </el-table-column>
                <el-table-column label="状态">
                    <template #default="scope">
                        <span :style="{ color: scope.row.store_status == 1 ? '#60B900' : '#969696' }">
                            {{ scope.row.store_status == 1 ? '正常' : '关闭' }}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="180" fixed="right">
                    <template #default="scope">
                        <div v-if="props.pageType != 'look'" class="btn-box">
                            <el-button
                                size="small"
                                @click="delFun(scope.$index + (pageParam.page - 1) * pageParam.pageSize, scope.row)"
                                >删除</el-button
                            >
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <el-empty v-else class="custom-el-empty" image="/static/noData.png" description="暂无数据"></el-empty>
        <!-- 分页 -->
        <div class="page-limit-box">
            <ZWPagination ref="PaginationRef" @submit="pageChangeFun" />
        </div>

        <StoreBox ref="StoreBoxRef" @submit="getChooseStore" @updatePage="updatePage" />
    </div>
</template>

<script setup lang="ts">
import StoreBox from './StoreBox.vue';
import ZWPagination from '@/components/Pagination.vue';
import { getSensitivelist } from '@/api/employe/storemanagement/sensitiveWord';
import { ref } from 'vue';
import { ElMessage } from 'element-plus';
import { useStore } from '@/store';
const store = useStore();
const pageParam = ref({
    page: 1,
    pageSize: 15
});
const props = defineProps(['pageType']);
const PaginationRef = ref();
const tableData: any = ref([]);
const formData = ref({
    store_ids: []
});
const StoreBoxRef = ref({});
const allTableData: any = [];
// 选择门店
const showStoreBox = () => {
    StoreBoxRef.value.appDialog.chooseIdList = tableData.value.map((it: any) => {
        return it.id;
    });
    StoreBoxRef.value.appDialog.visible = true;
};

// 分页
const pageChangeFun = (val: any) => {
    pageParam.value.page = val.page;
    pageParam.value.pageSize = val.page_size;
    tableData.value = allTableData.slice(
        (pageParam.value.page - 1) * 15,
        pageParam.value.pageSize * pageParam.value.page
    );
};

const getChooseStore = (val: any) => {
    const arr: any = [];
    val.forEach(item => arr.push(item.id));
    val.forEach((item: any) => {
        const index = tableData.value.findIndex((it: any) => {
            return it.id == item.id;
        });
        if (index == -1) {
            allTableData.push(item);
        }
    });
    formData.value.store_ids = arr;
    tableData.value = allTableData.slice(
        (pageParam.value.page - 1) * 15,
        pageParam.value.pageSize * pageParam.value.page
    );
    // store.dispatch('pageTotal', allTableData.length);
    PaginationRef.value.total = allTableData.length;
};

const delFun = (val: any, row: any) => {
    formData.value.store_ids = formData.value.store_ids.filter(item => item != row.id);
    allTableData.splice(val, 1);
    tableData.value = allTableData.slice(
        (pageParam.value.page - 1) * 15,
        pageParam.value.pageSize * pageParam.value.page
    );
    // store.dispatch('pageTotal', allTableData.length);
    PaginationRef.value.total = allTableData.length;
};
const updatePage = () => {
    // store.dispatch('pageTotal', formData.value.store_ids.length);
    PaginationRef.value.total = formData.value.store_ids.length;
};
const getLookStoresList = async (val: any) => {
    const res = await getSensitivelist({ store_ids: val });
    getChooseStore(res.data);
};
defineExpose({
    tableData,
    formData,
    getLookStoresList
});
</script>

<style lang="scss" scoped>
.title-box {
    display: flex;
    justify-content: space-between;
    font-size: 16px;
    font-family: PingFangSC-Medium, 'PingFang SC';
    font-weight: 500;
    color: #33302d;
    margin-bottom: 10px;

    span {
        color: #ff6b00;
        margin-right: 10px;
    }
}

.table-box {
    border: 1px solid #eaeaea;

    .avatar-box {
        display: flex;
        justify-content: flex-start;
        align-items: center;

        .avatar {
            width: 36px;
            height: 36px;
            border-radius: 4px;
        }

        .image-slot {
            .el-icon {
                font-size: 36px;
            }
        }

        .name {
            font-size: 14px;
            font-family: STHeitiSC-Light, STHeitiSC;
            font-weight: 300;
            color: #33302d;
            max-width: 109px;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            word-break: break-all;
            margin: 0 10px;
        }

        .sex {
            width: 18px;
            height: 18px;
        }
    }

    .tabs-list {
        div {
            padding: 0 4px;
            box-sizing: border-box;
            display: inline-block;
            background: #fffaf9;
            border-radius: 2px;
            border: 1px solid #ffc69e;
            font-size: 14px;
            font-family: STHeitiSC-Light, STHeitiSC;
            font-weight: 300;
            color: #ff6b00;
            margin-right: 10px;
            margin-bottom: 6px;
        }
    }

    .btn-box {
        text-align: left;

        div {
            cursor: pointer;
            display: inline-block;
            vertical-align: middle;
            width: 80px;
            height: 24px;

            // background: #ffffff;
            border-radius: 2px;
            border: 1px solid #eaeaea;
            text-align: center;
            line-height: 24px;
            margin: 0 6px 5px;
        }
    }
}

.table-box,
.custom-el-empty {
    min-height: calc(100vh - 442px);
}

:deep(.el-table__header-wrapper tr th.el-table-fixed-column--right) {
    background-color: #f9f9f9;
}
</style>
